﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectTemplate.aspx.cs" Inherits="ZLCMS.Web.SystemManage.Template.Web.SelectTemplate" %>
<style type="text/css">
.template {
    border: 1px solid #C0C0C0;
    border-radius: 8px 8px 8px 8px;
    cursor: pointer;
    float: left;
    height: 375px;
    margin: 12px;
    position: relative;
    width: 250px;
}

.template.selected {
    background-color: #FDF2D0;
    border: 1px solid #FF0000;
}

.template span {
    bottom: 9px;
    font-size: 14px;
    position: absolute;
    text-align: center;
    width: 100%;
}

.template img {
    height: 330px;
    left: 50%;
    margin-left: -110px;
    margin-top: -175px;
    position: absolute;
    top: 50%;
    width: 220px;
}
img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}


.template.selected .select-flg {
    display: block;
}
.select-flg {
    background: url("/SystemManage/themes/default/images/selected.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    display: none;
    height: 32px;
    position: absolute;
    right: -10px;
    top: -10px;
    width: 32px;
}

</style>

<div class="pageContent">
    <div class="pageFormContent" layoutH="56">
    
        <asp:repeater runat="server" id="repeater1">
            <ItemTemplate>
            
<div title="<%# Eval("Memo")%>" template-id="<%# Eval("Id")%>" class="template <%#SelectedTemplateId == (int)Eval("Id") ? "selected": ""%>">
            <img width="220" height="330"  src="<%# ZLCMS.Business.Util.FileKit.FirstFilePath(Eval("ImageUrl"))%>">
            <span><%# Eval("Name")%></span>
            <%#SelectedTemplateId == (int)Eval("Id") ? "<div class='select-flg'></div>": ""%>
            
                    </div>

            </ItemTemplate>
        </asp:repeater>
    </div>

    <form id="pageForm" method="post" runat="Server" class="pageForm required-validate"
    onsubmit="return validateCallback(this, navTabAjaxDone);" action="/SystemManage/Template/Web/SelectTemplate.aspx">
    <div class="formBar">
    <input id="selectedid" name="selectedid" type="hidden" />
	    <ul>
			<li>
	        <div class="buttonActive"><div class="buttonContent"><button onclick="$('#selectedid', navTab.getCurrentPanel()).val($('.selected', navTab.getCurrentPanel()).attr('template-id'));return <%=SelectedTemplateId %> != $('#selectedid', navTab.getCurrentPanel()).val();" type="submit">保存</button></div></div>
            </li>

			<li>
		    <div class="button"><div class="buttonContent"><button type="button" class="close">关闭</button></div></div>
			</li>
		</ul>
    </div>
    </form>
</div>

<script type="text/javascript">
    $('.template').bind('click', function () {
        var $this = $(this);
        if (!$this.hasClass('selected')) {
        //alert('f');
            //var tid = $this.attr('template-id');
            //成功的话，更新UI
            $('.template').removeClass('selected').children('.select-flg').appendTo($this.addClass('selected'));
        }
    }); 
</script>